<template>
  <el-dialog
    title="转让群组"
    :visible.sync="isshow"
    width="700px"
    @close="concleBuild"
  >
    <div class="buildContent">
      <div class="search_bar">
        <el-input
          placeholder="请输入成员姓名"
          prefix-icon="el-icon-search"
          v-model="memberName"
          clearable
          @input="getUserList"
        >
        </el-input>
      </div>
      <div class="groupList" v-loading="loading">
        <el-table
          :data="groupMemberList"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            width="30px"
          >
            <template slot-scope="scope">
              <el-radio v-model="checkId" :label="scope.row.userId" @input="handleSelectionChange"></el-radio>
            </template>
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="成员"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="teacherNum"
            label="工号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="memberLevel"
            label="等级"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.userType===0">普通成员</span>
              <span v-if="scope.row.userType===1">管理员</span>
              <span v-if="scope.row.userType===2">群主</span>

            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="concleBuild">取消</el-button>
      <el-button type="primary" @click="confirmBuild">确认</el-button>
  </span>
  </el-dialog>
</template>

<script>
import {
  GroupmemberList,
  transferMaster
} from '@/api/library_groupList/groupList'

export default {
  name: 'turnGroup',
  data() {
    return {
      isshow: false,
      // 所有员工数据
      allStaffData: [],
      groupId: '',
      groupName: '',
      memberName: '',
      checkId: '',
      checkInfo: {},
      groupMasterId: void 0,
      loading: true,
      groupMemberList: []
    }
  },
  methods: {
    show(id, groupName, groupMasterId) {
      this.groupId = id
      this.groupName = groupName
      this.getUserList()
      this.isshow = true
      this.groupMasterId = groupMasterId

    },
    // 获取群成员
    async getUserList() {
      this.loading = true
      let res = await GroupmemberList({ groupId: this.groupId, memberName: this.memberName })
      if (res.code == 200) {
        let arr = []
        if (res.data && res.data.length > 0) {
          res.data.forEach(e => {
            if (e.userId !== this.$store.getters.userId) {
              arr.push(e)
            }
          })
        }
        this.groupMemberList = arr
      }
      this.loading = false
    },
    handleSelectionChange(val) {
      console.log(val, 'lllll')
      this.checkId = val
      this.checkInfo = this.groupMemberList.find(e => e.userId == val)
    },
    confirmBuild() {
      if (this.checkId == '') {
        this.$message.error('请选择要转让成员')
        return
      }
      this.turnGroupById()
    },
    async turnGroupById() {
      this.$confirm(`确定将群组"${this.groupName}"转让给“${this.checkInfo.nickName}”？`, '转让确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        let res = await transferMaster({ groupId: this.groupId, groupMasterId: this.checkId })
        if (res.code == 200) {
          this.$message.success('转让成功')
          this.isshow = false
          this.$parent.getGroupList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消转让'
        })
      })
    },
    concleBuild() {
      // 清空树状选择
      this.checkId = ''
      this.checkInfo = {}
      this.isshow = false
    }
  }
}

</script>


<style scoped lang="scss">
::v-deep .el-tree-node__content {
  height: 50px;
}

.buildContent {
  width: 100%;

  .search_bar {
    padding: 5px 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }

  .groupList {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 400px;
    overflow-y: auto;

    .custom_tree_node {
      display: flex;
      align-items: center;

      .user_avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .user_info {
        margin-left: 10px;

        .user_name {
          font-size: 16px;
          font-weight: 600;
        }

        .user_num {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }


}


</style>
